<script setup>
import { computed } from 'vue';
import Codemirror from 'codemirror-editor-vue3';
// 引入css文件
import 'codemirror/lib/codemirror.css';
// 引入主题 可以从 codemirror/theme/ 下引入多个
import 'codemirror/theme/idea.css';

// 引入语言模式 可以从 codemirror/mode/ 下引入多个
// 代码提示功能 具体语言可以从 codemirror/addon/hint/ 下引入多个
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/addon/hint/javascript-hint.js';

const props = defineProps({
  options: {
    type: Object,
    default: () => ({
      // 语言及语法模式
      mode: 'text/javascript',
      // 主题
      theme: 'idea', // 'idea'
      // 显示函数
      line: true,
      // 显示行号
      lineNumbers: true,
      // 软换行
      lineWrapping: true,
      // tab宽度
      tabSize: 4,
      // 是否只读
      // 代码提示功能
      hintOptions: {
        // 避免由于提示列表只有一个提示信息时，自动填充
        completeSingle: false,
        // 不同的语言支持从配置中读取自定义配置 sql语言允许配置表和字段信息，用于代码提示
        tables: {
          BPSuv: ['DocEntry', 'Subject', 'DocStatus', 'Remarks'],
          BPSuvA: ['DocEntry', 'LineNum', 'Question', 'QstType'],
          BPSuvB: ['DocEntry', 'LineNum', 'UserID', 'UserName']
        }
      }
    })
  },
  readOnly: {
    type: Boolean,
    default: false
  }
});

const code = defineModel('value', { type: String, default: '' });
const editorOptions = computed(() => {
  return {
    ...props.options,
    readOnly: props.readOnly
  };
});
const onReady = editor => {
  editor.on('inputRead', (cm, location) => {
    if (/[a-zA-Z]/.test(location.text[0])) {
      cm.showHint();
    }
  });
};
</script>

<template>
  <Codemirror
    ref="editor"
    v-model:value="code"
    :options="editorOptions"
    border
    height="100%"
    width="100%"
    @ready="onReady"
  />
</template>
